<template>
	<view class="wocomplete">
		<view class="ag-topbg"></view>
		<view class="wocomplete-card">
			<view class="wocomplete-card__head">
				<view class="ag-womarker">{{firstChar(orderDetailData.WoType)}}</view>
				<view class="wocomplete-card__col">
					<view class="wocomplete-card__col-row">
						<text class="wocomplete-card__name">{{orderDetailData.WoType}}</text>
						<view class="wocomplete-card__no">{{orderDetailData.WoNum}}</view>
					</view>
					<view v-if="false" class="wocomplete-card__col-time">
						<text>总部派工：2017-3-21 15:19</text>
						<text>网点派工：2017-3-21 15:19</text>
					</view>
				</view>
			</view>

			<!-- 安装工单完工 -->
			<view v-if="true" class="wocomplete-card__body">
				<textarea class="wocomplete-card__remark" placeholder="完工备注" :value="OrderRremark" @input="onChangeOrderRremark"></textarea>
				<AGInput icon="calender" readonly placeholder="客户要求保养日期" @openCalender="onOpenAccoountClaimDate" :value="CustomerRequiresMaintenanceDate" />
				<!-- <yu-datetime-picker ref="AccoountClaimDate" :startYear="startYear" :value="CustomerRequiresMaintenanceDate" :isAll="true"
				 :current="false" @confirm="confirmAccoountClaimDate" /> -->
				<uni-calendar ref="AccoountClaimDate" :date="CustomerRequiresMaintenanceDate" :insert="false" :lunar="true" :start-date="'2019-3-2'" @confirm="confirmAccoountClaimDate" />
				<view class="wocomplete-card__content1" v-for="(productItem , index) in orderDetailData.WoProuduct" :range-key="index"
				 :key="productItem.WoObjectId">
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>产品编码：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.ProductNum}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>产品类型：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.ProdTypeGroup}}</text>
						</view>
					</view>
					<!-- 一行两个 -->
					<!-- 	<view class="ag-cellgroup">

					</view> -->
					<!-- 一行一个 -->
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>产品名称：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.ProductName}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>保修开始时间：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.WarrantyStartDate}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>保修结束时间：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.WarrantyEndDate}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>套装产品：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.SuitProductName||""}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>客户分类：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{orderDetailData.AccountClassify}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>安装位置：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.InstallLocation||""}}</text>
						</view>
					</view>
					<view class="ag-cell" v-if="productItem.ProductImage">
						<view class="ag-cell__value">
							<image mode="aspectFill" class="img-prod" :src="productItem.ProductImage" />
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>物流码：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.Barcode||""}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>物流码有效性：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.IsSerialValid||""}}</text>
						</view>
					</view>
					<AGInput icon="qrcode" placeholder="物流码" @openQrcode="onOpenQrcode(index, $event)" :value="productItem.Barcode"
					 :disabled="productItem.IsProductConfirmed" @onBlur="onBlurLogisticsCode(index,$event)" data-index="" />
					<AGInput icon="search" placeholder="产品" @openSearch="onOpenSearch(index)" :value="productItem.ProductNum"
					 :disabled="productItem.isDisplayProdInputField" />
					<AGInput icon="calender" placeholder="保修开始时间" @openCalender="onOpenPurchaseDate(index, e)" :value="productItem.PurchaseDate"
					 :disabled="productItem.IsProductConfirmed" />
					<uni-calendar ref="PurchaseDate" :insert="false" :lunar="true" :start-date="'2019-3-2'" @confirm="confirmPurchaseDate(index,$event)" />
					<button class="cu-btn lg primary block" @click="onAffirmProduct(index)">确认产品</button>
					<view class="wocomplete-fix-row">
						<AGInput placeholder="安装位置" :value="productItem.InstallLocation" />
						<button class="cu-btn primary" data-value="厨房" :data-index="index" @click="onKitchen">厨房</button>
						<button class="cu-btn primary" data-value="客厅" :data-index="index" @click="onIivingRoom">客厅</button>
					</view>
					<view class="repair" v-if="productItem.IsRequired">
						<view class="repair-head">
							<text class="repair-head__title">水质检测信息</text>
							<image v-if="productItem.isShowWaterAnalysisAddBtn" class="repair-head__add" src="../../../static/img/icon-add.png"
							 @click="onOpenWaterQualityPopup(index,$event)" />
						</view>
						<view class="repair-list" v-if="!productItem.isShowWaterAnalysisAddBtn">
							<view class="repair-item">
								<view class="repair-item__head">
									<text class="repair-item__head-title">水质检测结果</text>
									<image v-if="!productItem.isShowWaterAnalysisAddBtn" class="repair-item__head-edit" src="../../../static/img/icon-edit.png"
									 @click.stop="onOpenWaterQualityPopup(index,$event)" style=" margin: 5px; width: 17px;height: 17px;" />
									<image v-if="!productItem.isShowWaterAnalysisAddBtn" class="repair-item__head-del" src="../../../static/img/icon-close.png"
									 @click.stop="onCanleWaterQuality(index)" style="margin: 10px; width: 17px;height: 17px;" />
								</view>
								<view class="repair-item__body">
									<view class="ag-cell">
										<view class="ag-cell__label">
											<text>原水TDS：</text>
										</view>
										<view class="ag-cell__value">
											<text>{{productItem.OriTDS}}</text>
										</view>
									</view>
									<view class="ag-cell">
										<view class="ag-cell__label">
											<text>原水水温：</text>
										</view>
										<view class="ag-cell__value">
											<text>{{productItem.OriTemperature}}</text>
										</view>
									</view>
									<view class="ag-cell">
										<view class="ag-cell__label">
											<text>原水硬度：</text>
										</view>
										<view class="ag-cell__value">
											<text>{{productItem.OriHardness}}</text>
										</view>
									</view>
									<view class="ag-cell">
										<view class="ag-cell__label">
											<text>原水余氯：</text>
										</view>
										<view class="ag-cell__value">
											<text>{{productItem.OriChlorine}}</text>
										</view>
									</view>
									<view class="ag-cell">
										<view class="ag-cell__label">
											<text>纯水TDS：</text>
										</view>
										<view class="ag-cell__value">
											<text>{{productItem.NewTDS}}</text>
										</view>
									</view>
									<view class="ag-cell">
										<view class="ag-cell__label">
											<text>软化后硬度：</text>
										</view>
										<view class="ag-cell__value">
											<text>{{productItem.NewHardness}}</text>
										</view>
									</view>
									<view class="ag-cell">
										<view class="ag-cell__label">
											<text>净化余氯：</text>
										</view>
										<view class="ag-cell__value">
											<text>{{productItem.NewChlorine}}</text>
										</view>
									</view>
									<view class="ag-cell">
										<view class="ag-cell__label">
											<text>检测确认：</text>
										</view>
										<view class="ag-cell__value">
											<text>{{productItem.IsWaterAnalysis?"是":"否"}}</text>
										</view>
									</view>
									<view class="ag-cell">
										<view class="ag-cell__label">
											<text>是否必须水质检测：</text>
										</view>
										<view class="ag-cell__value">
											<text>{{productItem.IsRequired?"是":"否"}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="repair-footer">
						</view>
						<waterQuality ref="waterQuality" :proItem="productItem" :fieldReq="ParseWaterAnalysisFieldRequired(productItem.WaterAnalysisFieldRequired)"
						 @onSaveWaterQuality="saveWaterQuality(index,$event)" />
					</view>

				</view>
			<!-- 	<AGInput v-if="isShowActualReceiptAmountField" type="number" placeholder="实际收款总金额（保内工单不显示）" :value="ActualReceiptAmount"
				 @change="onChangeActualReceiptAmount" /> -->
				 <view class="wocomplete-fix-row" v-if="isShowActualReceiptAmountField">
				 	<text style="margin-left: 60rpx;">实际收款总金额：</text>
				 	<AGInput placeholder="实际收款总金额（保内工单不显示）" :value="ActualReceiptAmount" @change="onChangeActualReceiptAmount" width="30rpx" />
				 </view>
			</view>
		</view>

		<view class="wocomplete-section">
			<view class="wocomplete-section__head">
				<view>现场图片</view>
				<navigator url="../../woupload/index" v-if="orderDetailData.WoItemPicture"><text class="cuIcon-upload">上传图片</text></navigator>
			</view>
			<scroll-view :scroll-x="true" class="wocomplete-listimage">
				<view class="wocomplete-listimage__inner">
					<image class="wocomplete-listimage__item" v-for="(picItem, picIndex) in orderDetailData.WoItemPicture" :key="picIndex"
					 :src="getImageBase64(picItem)" @tap="navToUploadImg" />
					 	<navigator url="../../woupload/index" v-if="!orderDetailData.WoItemPicture"><text class="cuIcon-upload">上传图片</text></navigator>
				</view>
			</scroll-view>
		</view>
		<view class="wocomplete-section">
			<view class="wocomplete-section__head">
				<view>完工处理状态</view>
				<!-- <text>查看全部</text> -->
			</view>
			<view class="wocomplete-listprocess">
				<view class="wocomplete-listprocess__item">
					<text class="wocomplete-listprocess__title">数据同步：{{orderDetailData.DataSyncStateName}}</text>
					<text class="wocomplete-listprocess__desc">{{orderDetailData.DataSyncInfo}}</text>
				</view>
				<view class="wocomplete-listprocess__divider"></view>
				<view class="wocomplete-listprocess__item">
					<text class="wocomplete-listprocess__title">完工处理：{{orderDetailData.FinishedHandleStateName}}</text>
					<text class="wocomplete-listprocess__desc">{{orderDetailData.FinishHandleInfo}}</text>
				</view>
			</view>
		</view>
		<view class="wocomplete-footer">
			<button class="cu-btn lg primary block plain" @click="onCancel">取消</button>
			<button class="cu-btn lg primary block" @click="onSumbit">提交</button>
		</view>
	</view>
</template>

<script>
	import yuDatetimePicker from "@/components/yu-datetime-picker/yu-datetime-picker.vue"
	import uniCalendar from '@dcloudio/uni-ui/lib/uni-calendar/uni-calendar.vue'
	import waterQuality from "@/components/WaterQualityPopup"
	import AGInput from '@/components/AGInput';
	import installbehavior from './installbehavior'
	export default {
		mixins: [installbehavior],
		components: {
			AGInput,
			waterQuality,
			uniCalendar,
			yuDatetimePicker
		},
		watch: {
			'orderDetailData': {
				handler(newval, oldval) {
					if (newval.hasOwnProperty("WoProuduct") &&
						newval.WoProuduct.length > 0) {
						this.initData(newval);
					}
				}
			},
		},
		data() {
			return {
				orderDetailData: {},
				orderDataCache: {},
				orderDetailId: "",
				OrderRremark: "",
				CustomerRequiresMaintenanceDate: "",
				ActualReceiptAmount: "",
				PurchaseDateIndex: '',
				//物流码是否可填
				IsLogisticsCodeFill: true,
				//产品是否可填
				IsProductFill: true,
				startYear: new Date().getFullYear() - 1
			}
		},
		onLoad: function(Option) {
			//上传图片后刷新
			uni.$on('reLoadInstall', () => {
				this.GetOrderDataImg().then((succ) => {
					this.orderDetailData.WoItemPicture = succ;
				}, (err) => {
					console.log(err);
				})
			})
			//选择产品后刷新
			uni.$on('selectProdItem', (e) => {
				//console.log(e.prodItem,e.prodIndex);
				let upProdItem = this.orderDetailData.WoProuduct[e.prodIndex];
				console.log(e.prodItem, upProdItem);
				let selectProdItem = e.prodItem;
				upProdItem.ProductNum = selectProdItem.Name;
				upProdItem.ProductName = selectProdItem.ProductNumber;
				upProdItem.ProductId = selectProdItem.ProductId;
				upProdItem.ProdTypeGroup = selectProdItem.ProductTypeName;
				upProdItem.WaterAnalysisFieldRequired = selectProdItem.WaterAnalysisFieldRequired;
				upProdItem.FaultyGroup = selectProdItem.proFaultyGroup;
				upProdItem.FaultyGroupName = selectProdItem.proFaultyGroupName;
				upProdItem.ProductImage = e.proImage;
				//console.log(selectProdItem.WaterAnalysisFieldRequired, upProdItem.WaterAnalysisFieldRequired)
			})
			this.orderDetailId = Option.orderDetailId;
			//console.log(this.orderDetailId);
			this.onLoadData();
		},
		onUnload() {
			uni.$off("reLoadInstall");
			uni.$off("selectProdItem");
		},
		methods: {
			saveWaterQuality(index, e) {
				//console.log(e);
				let proItem = this.orderDetailData.WoProuduct[index];
				let formData = e;
				proItem.NewChlorine = formData.NewChlorinetxt;
				proItem.NewHardness = formData.NewHardnesstxt
				proItem.NewTDS = formData.NewTDStxt
				proItem.OriChlorine = formData.OriChlorinetxt
				proItem.OriHardness = formData.OriHardnesstxt
				proItem.OriTDS = formData.OriTDStxt
				proItem.OriTemperature = formData.OriTemperaturetxt
				proItem.IsWaterAnalysis = true;
				proItem.isShowWaterAnalysisAddBtn = false;
				this.$refs.waterQuality[index].closePoPup();
				//console.log(this.orderDetailData.WoProuduct[index]);
			},

			onLoadData() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				this.GetOrderData();
			},
			navToUploadImg(e) {
				//console.log(e);
				uni.navigateTo({
					url: "../../woupload/index"
				})
			},
			onOpenAccoountClaimDate(e) {
				// if (this.CustomerRequiresMaintenanceDate) {
				// 	console.log(this.CustomerRequiresMaintenanceDate)
				// 	this.$refs.AccoountClaimDate.showSetDate(this.CustomerRequiresMaintenanceDate);
				// }
				if(this.CustomerRequiresMaintenanceDate){
					this.$refs.AccoountClaimDate.init(this.CustomerRequiresMaintenanceDate);
				}
				this.$refs.AccoountClaimDate.open();
			},
			confirmAccoountClaimDate(e) {
				let selectRes = e.fulldate
				this.CustomerRequiresMaintenanceDate = selectRes;
				console.log(this.CustomerRequiresMaintenanceDate);
			},
			onOpenPurchaseDate(index, e) {
				let proItem = this.orderDetailData.WoProuduct[index];
				if (!proItem.IsProductConfirmed) {
					this.$refs.PurchaseDate[index].open();
				}
			},
			//保修时间
			confirmPurchaseDate(index, e) {
				console.log("时间", e);
				let prodItem = this.orderDetailData.WoProuduct[index];
				// 产品确认为 false
				if (prodItem.IsProductConfirmed == false) {
					prodItem.PurchaseDate = e.fulldate;
					console.log(index);
				} else {
					uni.showToast({
						title: "产品已确认",
						icon: "none"
					});
				}
			},
			//扫描物流码
			onOpenQrcode(index, e) {
				let prodItem = this.orderDetailData.WoProuduct[index];
				if (prodItem.IsProductConfirmed == true) {
					uni.showToast({
						title: "产品已确认,不能输入物流码",
						icon: "none"
					});
				} else {
					// 调起条码扫描
					uni.scanCode({
						scanType: 'barCode',
						success: (res) => {
							//console.log('条码类型：' + res.scanType);
							//console.log('条码内容：' + res.result);
							prodItem.Barcode = res.result;
							//let isCheckBarcode = productItem.isCheckBarcode;
							uni.showLoading({
								mask: true,
							})
							this.BarcodeValidCheckAsync(index, prodItem.Barcode)
								.then((succ) => {
									let data = succ;
									this.RefreshProduct(data, index, prodItem.Barcode);
								}, (err) => {
									uni.hideLoading();
									uni.showToast({
										title: "物流码验证失败",
										icon: "none",
										duration: 3000
									});
								});
						}
					});
				}
			},
			//产品
			onOpenSearch(index) {
				let prodItem = this.orderDetailData.WoProuduct[index];
				//console.log(prodItem.IsProductFill)
				if (!prodItem.IsProductConfirmed) {
					uni.navigateTo({
						url: `../../productlist/index?action=selectproduct&prodIndex=${index}`
					})
				} else {
					uni.showToast({
						title: "不能选择产品",
						icon: "none",
						mask: true,
						duration: 800
					})
				}
			},
			onAffirmProduct(index) {
				let prodItem = this.orderDetailData.WoProuduct[index];
				if (prodItem.IsProductConfirmed == true) {
					uni.showToast({
						title: "产品已确认,不能输入物流码",
						icon: "none"
					});
				} else {
					uni.showLoading({
						title: "确认产品中..",
						mask: true,
					})
					this.AffirmProduct(index);
					//console.log("确认产品");
				}
			},
			//物流码
			onBlurLogisticsCode(index, e) {
				//console.log(e);
				if (e.detail.value) {
					let productItem = this.orderDetailData.WoProuduct[index];
					let strOriBarcode = e.detail.value;
					let strBarcode = productItem.Barcode;
					let isCheckBarcode = productItem.isCheckBarcode;
					//debugger;
					if ((!isCheckBarcode) || (isCheckBarcode && strOriBarcode != strBarcode)) {
						uni.showLoading({
							mask: true,
						})
						this.BarcodeValidCheckAsync(index, strOriBarcode)
							.then((succ) => {
								let data = succ;
								this.RefreshProduct(data, index, strOriBarcode);
							}, (err) => {
								uni.hideLoading();
								uni.showToast({
									title: "物流码验证失败",
									icon: "none",
									duration: 2000
								});
							});
					}
				}
			},

			//厨房
			onKitchen(e) {
				let dataset = e.currentTarget.dataset
				let index = dataset.index;
				this.orderDetailData.WoProuduct[index].InstallLocation = dataset.value
			},
			//客厅
			onIivingRoom(e) {
				let dataset = e.currentTarget.dataset
				let index = dataset.index
				this.orderDetailData.WoProuduct[index].InstallLocation = dataset.value;
			},

			//取消
			onCancel(e) {
				uni.showModal({
					title: "取消确认",
					content: "您是否放弃提交当前的完工信息？",
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack();
						}
					},
				})
			},
			//提交
			onSumbit(e) {
				this.SubmitOrder();
			},
			//打开水质检测
			onOpenWaterQualityPopup(index,e) {
				// let productItem = this.orderDetailData.WoProuduct[index]
				// this.$refs.proItem = productItem;
				// this.$refs.fieldReq = this.ParseWaterAnalysisFieldRequired(productItem.WaterAnalysisFieldRequired);
				this.$refs.waterQuality[index].openPoPup();
			},
			//移除水质检测
			onCanleWaterQuality(e) {
				let productItem = this.orderDetailData.WoProuduct[e];
				uni.showModal({
					title: "操作确认",
					content: "确认删除水质检测信息？",
					success: function(res) {
						if (res.confirm) {
							productItem.OriTDS = "";
							productItem.OriTemperature = "";
							productItem.OriHardness = "";
							productItem.OriChlorine = "";
							productItem.NewTDS = "";
							productItem.NewHardness = "";
							productItem.NewChlorine = "";
							productItem.isShowWaterAnalysisAddBtn = true;
							productItem.isWaterAnalysis = false;
						}
					}
				});
			},
			//完工备注
			onChangeOrderRremark(e) {
				this.OrderRremark = e.detail.value;
			},
			//实际收款总金额
			onChangeActualReceiptAmount(e) {
				console.log(e);
				this.ActualReceiptAmount = e;
			}
		}
	}
</script>

<style lang="scss">
	@import '../index.scss';
</style>
